<template>
  <s-page custom-class="Checkbox-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-checkbox v-model="checked" @change="onChange" />
      </c-demo-block>

      <c-demo-block title="单项数据控制">
        <s-cell title="选择" @click="checked = !checked">
          <s-checkbox slot="right" :value="checked" />
        </s-cell>
      </c-demo-block>

      <c-demo-block title="描述文字">
        <s-checkbox v-model="checked" label="复选框" />
      </c-demo-block>

      <c-demo-block title="禁用状态">
        <s-row :gutter-y="30">
          <s-col :span="24">
            <s-checkbox disabled label="复选框" />
          </s-col>
          <s-col :span="24">
            <s-checkbox v-model="checked" disabled label="复选框" />
          </s-col>
        </s-row>
      </c-demo-block>

      <c-demo-block title="自定义形状">
        <s-checkbox v-model="checked" shape="round" label="复选框" />
      </c-demo-block>

      <c-demo-block title="自定义颜色">
        <s-checkbox v-model="checked" checked-color="#ee0a24" label="复选框" />
      </c-demo-block>

      <c-demo-block title="自定义图标">
        <s-checkbox v-model="checked" label="复选框">
          <template #icon>
            <image :src="checked ? activeIcon : inactiveIcon" style="width: 40rpx; height: 36rpx" />
          </template>
        </s-checkbox>
      </c-demo-block>

      <c-demo-block title="自定义大小">
        <s-checkbox v-model="checked" :icon-size="50" label="复选框" />
      </c-demo-block>

      <c-demo-block title="复选框组">
        <s-checkbox-group v-model="checkedNames">
          <s-row :gutter="30">
            <s-col v-for="(item, index) of list" :key="index">
              <s-checkbox :name="item" :label="'复选框 ' + item" />
            </s-col>
          </s-row>
        </s-checkbox-group>
      </c-demo-block>

      <c-demo-block title="限制最大可选数，最多选择2个">
        <s-checkbox-group v-model="maxNames" :max="2" @max="onCheckedMax">
          <s-row :gutter="30">
            <s-col v-for="(item, index) of list" :key="index">
              <s-checkbox :name="item" :label="'复选框 ' + item" />
            </s-col>
          </s-row>
        </s-checkbox-group>
      </c-demo-block>

      <c-demo-block title="与 Cell 组件一起使用">
        <s-checkbox-group v-model="checkedNames">
          <s-cell v-for="(item, index) of list" :key="index" :title="'复选框 ' + item" @click="toggle(index)">
            <view slot="right" @click.stop>
              <s-checkbox ref="checkbox" :name="item" shape="round" />
            </view>
          </s-cell>
        </s-checkbox-group>
      </c-demo-block>

      <c-demo-block title="全选与反选">
        <s-row :gutter="30" custom-style="margin-bottom:30rpx">
          <s-col><s-button type="primary" @click="checkAll">全选</s-button></s-col>
          <s-col><s-button type="danger" @click="cancelAll">取消</s-button></s-col>
          <s-col><s-button type="success" @click="toggleAll">反选</s-button></s-col>
        </s-row>

        <s-checkbox-group ref="checkboxGroup" v-model="checkAllNames">
          <s-row :gutter="20">
            <s-col v-for="(item, index) of list" :key="index">
              <s-checkbox :name="item" :label="'复选框 ' + item" />
            </s-col>
          </s-row>
        </s-checkbox-group>
      </c-demo-block>

      <!-- #ifndef MP-TOUTIAO -->
      <c-demo-block title="自定义渲染">
        <s-checkbox-group v-model="checkedNames" @change="onGroupChange">
          <s-row :gutter="20" :gutter-y="20">
            <s-col v-for="(item, index) of list" :key="index">
              <s-checkbox :name="item" :scope-params="{ item }">
                <template #default="{ checked, scopeParams }">
                  <s-button hover-class="none" type="primary" :plain="!checked">
                    {{ "复选框 " + scopeParams.item }}
                  </s-button>
                </template>
              </s-checkbox>
            </s-col>
          </s-row>
        </s-checkbox-group>
      </c-demo-block>
      <!-- #endif -->
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    list: [1, 2, 3],
    checked: true,
    maxNames: [1],
    checkedNames: [1],
    checkbox: [],
    checkAllNames: [1],
    activeIcon: 'https://img01.yzcdn.cn/vant/user-active.png',
    inactiveIcon: 'https://img01.yzcdn.cn/vant/user-inactive.png',
  }),
  methods: {
    toggle(index) {
      this.$refs.checkbox[index].toggle();
    },
    onChange(checked) {
      console.log(checked);
    },
    onGroupChange(names) {
      console.log(names);
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll({
        checked: true,
        skipDisabled: true,
      });
    },
    cancelAll() {
      this.$refs.checkboxGroup.toggleAll({
        checked: false,
        skipDisabled: true,
      });
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll({
        skipDisabled: true,
      });
    },
    onCheckedMax(names) {
      uni.showToast({
        title: `最多可选择${names.length}项`,
        icon: 'none',
        mask: true,
      });
    },
  },
};
</script>

<style lang="scss">
.Checkbox-Page {
  .container {
    padding: 0 $padding-md;
  }
}
</style>
